{% extends "include/base.html" %}

{% block title %}Authorizations{% endblock %}




{% block document_ready %}
   {% if not logged_in %}document.location.href = '/';{% endif %}

		$( "#create-authorization-dialog" ).dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			buttons:
			{
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				//allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});

		$( "#do-authorization-dialog" ).dialog({
			autoOpen: false,
			height: 480,
			width: 640,
			modal: true,
			buttons:
			{
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				refresh_authorizations();
			}
		});

		$( "#create-authorization" )
			.button()
			.click(function() {
				$( "#create-authorization-dialog" ).dialog( "open" );
			});

		$("#create-test-authorization-button")
			.button()
			.click({type:"Test"},create_authorization);
		$("#create-fb-authorization-button")
			.button()
			.click({type:"Facebook"},create_authorization);
		$("#create-twitter-authorization-button")
			.button()
			.click({type:"Twitter"},create_authorization);
		$("#create-google-analytics-authorization-button")
			.button()
			.click({type:"GoogleAnalytics"},create_authorization);
		$("#create-youtube-authorization-button")
			.button()
			.click({type:"YouTube"},create_authorization);
		$("#create-vimeo-authorization-button")
			.button()
			.click({type:"Vimeo"},create_authorization);



      function create_authorization(event)
      {
      	$( "#create-authorization-dialog" ).dialog( "close" );

      	window.open('/authorizations/do_authorization?type='+event.data.type,'','width=700,height=400');

      }

      function refresh_authorizations()
      {

           $.getJSON('/api/authorization/get_authorizations', function(data) {
		       $('#authorizations_list_wrapper').empty();
		       for(var i = 0;i < data.length;i++)
		       {
		       		var authorization = data[i];
		       		//console.dir(authorization)
		       		//info
		       		$('#authorizations_list_wrapper').append(
		       		"<div class='authorization_wrapper'>"+
		       		"type:"+authorization.type+"<br/>"+
		       		"name:"+authorization.username+"<br/>"+
		       		"<img src='"+authorization.pic+"' width=64 height=64/><br/>"+
		       		"idx:"+i+"<br/>"+
		       		"key:"+authorization.key+"<br/>"+
		       		"token:"+authorization.token+"<br/>"+
		       		"secret:"+authorization.secret+"<br/>"+
		       		"scopes:"+authorization.scopes+"<br/>"+
		       		"date created:"+new Date(authorization.created)+"<br/>"+
		       		"modified:"+new Date(authorization.modified)+"<br/>"+
		       		"</div>");
		       		//actions

		       		$('#authorizations_list_wrapper').append("<a href='#' id='auth_list_delete_"+i+"'>[delete]</a>")

		       		$('#auth_list_delete_'+i).click({key:new String(authorization.key)},function(event){
		       			 $.getJSON('/api/authorization/delete_authorization/'+event.data.key, function(data) {
									//alert("deleted "+data.key);
									refresh_authorizations();
			   					});
		       		});

		       		$('#authorizations_list_wrapper').append("<br/><br/>")


		       }
	      })
      }



	function init()
	{
		refresh_authorizations();
	}
	init();
{% endblock %}

{% block script %}

function authorization_complete()
{
	$( "#do-authorization-dialog" ).dialog("close");
}

{% endblock %}

{% block content %}

<h2 class='section-heading'>Connections</h2>


<div class='section-content'>
<h3>These are the Authorizations.</h3>

<div id="authorizations_list_wrapper">

</div>
</div>

<script>
function test_twitter()
{
	 $.getJSON('/api/authorization/test', function(data) {
			console.log(data)
		 });
}
</script>
<div>



</div>

<div id="add_button_wrapper" class='section-heading'>

<a href="#" onclick="test_twitter()">test twitter</a><br /><br />

<button id="create-authorization">[ + Add Authorization ]</button>
</div>

<div id="create-authorization-dialog" title="Create Authorization">
	<div id="create-authorization-dialog-items">
		<div id="create-authorization-dialog-item">
			<button id="create-test-authorization-button">Create Test Auth</button>
		</div>
		<div id="create-authorization-dialog-item">
			<button id="create-fb-authorization-button">Create FB Auth</button>
		</div>
		<div id="create-authorization-dialog-item">
			<button id="create-twitter-authorization-button">Create Twitter Auth</button>
		</div>
		<div id="create-authorization-dialog-item">
			<button id="create-google-analytics-authorization-button">Create Google Analytics Auth</button>
		</div>
		<div id="create-authorization-dialog-item">
			<button id="create-youtube-authorization-button">Create YouTube Auth</button>
		</div>
		<div id="create-authorization-dialog-item">
			<button id="create-vimeo-authorization-button">Create Vimeo Auth</button>
		</div>
	</div>
</div>

<div id="do-authorization-dialog" title="Authorize">

</div>


{% endblock %}